@import 'tailwindcss';
@import '../styles/utility.scss';

/* DaisyUI 全局配置 https://daisyui.com/docs/config */
@plugin "daisyui" {
  /* 启用主题列表。使用 false 禁用所有主题。使用 all 启用所有主题。在主题名称旁边添加 --default 标志将其设置为默认主题。在主题名称旁边添加 --prefersdark 标志将其设置为暗黑模式的默认主题。 */
  themes: light --default, dark --prefersdark;
  /* 排除当模态框或抽屉打开时添加到 :root 的 rootscrollgutter 样式。 */
  exclude: rootscrollgutter;
  logs: false;
}

/* Tailwindcss 配置：
如果您想通过 CSS 选择器而不是 prefers-color-scheme 媒体查询来驱动您的暗黑主题，请覆盖 dark 变体以使用您自定义的选择器；
例如，您可以使用 data-theme 属性来切换主题，兼容 DaisyUI 的主题切换方式。
 */
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

:root {
  --background: #ffffff;
  --foreground: #171717;
  /* @utility bg-asset-grid */
  --asset-grid-bg-color: rgb(255, 255, 255);
  --bg-asset-grid-color: rgb(200, 200, 200);
}

[data-theme='dark'] {
  --background: #0a0a0a;
  --foreground: #ededed;
  /* @utility bg-asset-grid */
  --asset-grid-bg-color: rgb(61, 71, 92);
  --bg-asset-grid-color: rgb(9, 12, 15);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Tailwindcss 主题配置 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-doto: var(--font-doto);
  --font-zcool: var(--font-zcool);
}

/* DaisyUI 主题配置 */
@plugin "daisyui/theme" {
  name: 'light';
  default: true;
  --color-primary: var(--color-purple-700);
}

@plugin "daisyui/theme" {
  name: 'dark';
  --color-primary: var(--color-purple-900);
}
